<template>
	<view class="content">
		<!-- F1：自定义导航条 -->
		<!-- left-icon：左侧图标 -->
		<!-- left-text：左侧文本 -->
		<!-- right-text：右侧文本 -->
		<!-- right-icon：右侧图标 -->
		<!-- color：文字颜色 -->
		<!-- background-color：背景颜色 -->
		<uni-nav-bar class="navbar" color="#fff" left-icon="back" left-text="返回" title="缴 费" right-icon="list"
			@clickLeft="back()" @clickRight="jump('/pages/feeHistory/feeHistory')" />

		<!-- F2：待缴费用统计区 -->
		<view class="fee-statistics">
			<text class="description">当前待缴费用（元）</text>
			<text class="amount">{{total}}</text>
		</view>

		<!-- F3：待缴费用列表 -->
		<uni-list>
			<!-- thumb：列表项前的缩略图 -->
			<!-- thumb-lg：缩略图大小  lg/medium/sm -->
			<!-- right-text：右侧的文字 -->
			<!-- link：能够点击 + 向右的箭头 -->	
			<!-- to：跳转地址 -->
			<uni-list-item title="水费" thumb="../../static/img/shui.png" thumb-size="lg" :right-text="fees.shui<0 ? `待缴费用${-fees.shui}元` : ''" link to="/pages/feeDetails/feeDetails?type=1"/>
			<uni-list-item title="电费" thumb="../../static/img/dian.png" thumb-size="lg" :right-text="fees.dian<0 ? `待缴费用${-fees.dian}元` : ''" link to="/pages/feeDetails/feeDetails?type=2"/>
			<uni-list-item title="燃气费" thumb="../../static/img/ranqi.png" thumb-size="lg" :right-text="fees.ranqi<0 ? `待缴费用${-fees.ranqi}元` :''" link to="/pages/feeDetails/feeDetails?type=3"/>
			<uni-list-item title="物业费" thumb="../../static/img/wuye.png" thumb-size="lg" :right-text="fees.wuye<0 ? `待缴费用${-fees.wuye}元` : ''" link to="/pages/feeDetails/feeDetails?type=4"/>
			<uni-list-item title="停车费" thumb="../../static/img/tingche.png" thumb-size="lg" :right-text="fees.tingche<0 ? `待缴费用${-fees.tingche}元` : ''" link to="/pages/feeDetails/feeDetails?type=5"/>
			<uni-list-item title="宽带费" thumb="../../static/img/kuandai.png" thumb-size="lg" :right-text="fees.kuandai<0 ? `待缴费用${-fees.kuandai}元` : ''" link to="/pages/feeDetails/feeDetails?type=6"/>
		</uni-list>
	</view>
</template>

<script>
	import { feeList } from '@/service' 
	export default {
		data() {
			return {
				fees: {},		//待缴费用
			}
		},
		async onLoad() {
			//页面的生命周期方法 - 页面加载，注意不是“mounted”
			//异步请求服务器接口数据 - “待缴费用列表”
			let data = await feeList()
			console.log(data)
			//如果用户没有登录或登录已超时，需要弹窗提醒，点击“确定”后跳转到登录页
			if(data.code){	//4100、4101、4102
				uni.showModal({
					title: '错误',
					content: '您尚未登录或登录已超时，请重新登录！',
					showCancel: false,		//不显示“取消”按钮
					confirmText: '去登录',
					success: ()=>{
						//在客户端缓存中存储当前页面地址
						uni.setStorageSync('loginReasonPage', '/pages/feePay/feePay')
						uni.redirectTo({		//重定向跳转
							url: '/pages/login/login'
						})
					}
				})
				return
			}
			//已经查询到当前登录用户的待缴费信息
			this.fees = data
		},
		computed: {
			//计算属性 - 使用方法和普通属性一样，本质其实是方法，依赖于其它的属性，依赖的属性一变，计算属性的值也要重新计算
			total(){
				let sum = 0
				sum += this.fees.shui<0 ? this.fees.shui : 0
				sum += this.fees.dian<0 ? this.fees.dian : 0
				sum += this.fees.ranqi<0 ? this.fees.ranqi : 0
				sum += this.fees.wuye<0 ? this.fees.wuye : 0
				sum += this.fees.tingche<0 ? this.fees.tingche : 0
				sum += this.fees.kuandai<0 ? this.fees.kuandai: 0
				return Number(sum * -1).toFixed(2)
				//注意：此处必须先变为正数，然后再保留两位小数；不能反过来
			}
		}, 
		methods: {
			jump(url){
				uni.navigateTo({
					url
				})
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.navbar {

		//样式穿透 - 在父组件内修改子组件内部的样式
		::v-deep .uni-navbar__content {
			width: 100%;
		}

		::v-deep .uni-navbar__header {
			width: 100%;
			background-color: $zh-theme-color !important; //背景颜色：主题色
		}

		::v-deep .uni-nav-bar-text {
			//标题栏中间的文字
			// color: #fff !important;
		}
	}

	.fee-statistics {
		flex-direction: column; //弹性容器的主轴方向：纵向
		align-items: center; //子元素在交叉轴方向：居中
		padding: $uni-spacing-col-lg*4 0; //上下方向内边距
		background-color: $zh-theme-color; //背景颜色
		color: #fff; //文字颜色

		.description {
			font-size: $uni-font-size-base;
		}

		.amount {
			font-size: $uni-font-size-lg*2;
		}
	}

	::v-deep .uni-list-item__extra-text {
		color: #f00;
	}
</style>